<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新东方</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			li {
				list-style: none;
			}

			a {
				text-decoration: none;
				color: black;
			}

			#nav {
				width: 900px;
				display: flex;
				justify-content: space-between;
				background: url(image/top_bg.gif);
				height: 27px;
				line-height: 27px;
			}

			#nav .logo {
				margin-left: 20px;
			}

			#nav .menu {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				margin-right: 30px;
				justify-content: center;

			}

			#nav .menu>li {
				width: 100px;
				text-align: center;
				font-size: 16px;
			}

			#nav .menu>li>a {
				border-right: 1px solid gray;
				padding-right: 20px;
			}

			#nav .menu li #map {
				display: none;
				width: 260px;
				position: absolute;
				left: -140px;
				top: 20px;
				justify-content: center;
				border: 1px solid darkgrey;
				background-color: white;
			}

			#nav #navicon {
				position: relative;
				
			}
			#nav #navicon img{
				vertical-align:middle;
				position: absolute;
				top: 8px;
				right: 15px;
			}

			#nav .menu li:hover #map {
				display: block;
			}

			#nav .menu li #map ul {
				width: 250px;
				display: flex;
				flex-flow: row wrap;
				justify-content: flex-start;
				border-bottom: 1px solid darkgray;
				margin: 0 auto;
				padding: 20px 0px;
			}

			#nav .menu>li #map ul li {
				margin-right: 20px;
				border: none;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<div class="logo">
				<img src="image/logo.gif" />
			</div>
			<ul class="menu">
				<li><a href="#">购物车</a></li>
				<li><a href="#">优惠券</a></li>
				<li><a href="#">快速注卡</a></li>
				<li><a href="#">各地购课</a></li>
				<li><a href="#">手机报</a></li>
				<li id="navicon"><a href="#" style="border: none;">网站导航<img src="image/open_icon.gif" /></a>
					<div id="map">
						<ul>
							<li><a href="#">托福</a></li>
							<li><a href="#">雅思</a></li>
							<li><a href="#">考研</a></li>
							<li><a href="#">职称英语</a></li>
							<li><a href="#">初中</a></li>
							<li><a href="#">日语</a></li>
						</ul>
						<ul>
							<li><a href="#">网络课堂</a></li>
							<li><a href="#">资讯中心</a></li>
							<li><a href="#">知识堂</a></li>
							<li><a href="#">大师讲坛</a></li>
							<li><a href="#">学习论坛</a></li>
							<li><a href="#">学词</a></li>
							<li><a href="#">考研搜校</a></li>
						</ul>
						<ul>
							<li><a href="#">M-Zone </a></li>
							<li><a href="#">手机报</a></li>
							<li><a href="#">时时英语</a></li>
						</ul>
					</div>
				</li>
			</ul>

		</div>
	</body>
</html>
